<template>
	<view class="upload">
		<div class="top">
			<!-- <Upload :action="action" @uploadImg="uploadImg"  :showUploadList="false">
				<template #customize>
					<u-avatar :src="userInfo.avatar" size="128"></u-avatar>
				</template>
			</Upload> -->

			<imgList hide ref="img" @setimg="setimg" size="128" />
			<u-image width="128" :src="avatar_img" height="128" @click="$refs.img.upload('setimg')" />
			<div class="change">{{ $t("点击头像更换") }}</div>
		</div>
		<div class="info">
			<div class="item" v-for="item in list " :key="item.title">
				{{ $t(item.title) }}
				<div class="left u-flex-1">
					<u-input v-if="!item.url" :disabled="item.disabled" v-model="userInfo[item.props]"
						input-align='right' />
					<u-input maxlength="10" v-else :disabled="true" v-model="userInfo[item.props]" input-align='right' />
					<u-icon @tap="goChangePhone(item.url)" v-if="item.url" name="arrow-right" size="26" color="#999999">
					</u-icon>
				</div>
			</div>
			<div class="item" @click="$u.route('/pages/mine/myInfo/changePas')">
				{{ $t('修改支付密码') }}
				<div class="left">
					<u-icon name="arrow-right" size="26" color="#999999">
					</u-icon>
				</div>
			</div>
			<div class="item" @click="$u.route('pages/mine/myInfo/changeAddress')">
				{{ $t('我的地区') }}
				<div class="left">
					<text>{{ area }}</text>
					<u-icon name="arrow-right" size="26" color="#999999">
					</u-icon>
				</div>
			</div>
		</div>
		<div class="btn">
			<u-button type="primary" @tap="changeInfo">{{ $t("修改") }}</u-button>
		</div>
		<u-select v-model="showRegion" :list="regionList" mode="mutil-column-auto" @confirm="confirm"></u-select>
	</view>
</template>

<script>
import Upload from "@/components/Upload";
import $config from '@/api/http.baseUrl.js';
export default {
	name: "myInfo",
	components: {
		Upload
	},
	data() {
		return {
			img: "",
			showRegion: false,
			regionList: [],
			action: `${$config.baseUrl}/system/basic/postUploadOne`,
			avatar_img: '',
			userInfo: {
				avatar: "",
				name: '',
				real_name: '',
				store_name: '',
				mobile: '',
				area_code: '',
			},
			list: [
				{
					title: "昵称",
					props: 'name'
				},
				{
					title: "真实姓名",
					props: 'real_name'
				},
				{
					title: "门店",
					props: 'store_name',
					disabled: true
				},
				{
					title: "绑定手机号",
					url: "/pages/mine/myInfo/changePhone",
					props: 'mobile'
				},
			],
			area: '',

		}
	},
	created() {
		this.getUserInfo()
		this.getRegion()
	},
	methods: {
		getRegion() {
			this.$u.api.getRegion().then(res => {
				console.log('res: ', res);
				this.regionList = res.data
			})
		},
		// 获取到上传的img id
		setimg(e) {
			console.log('e: ', e);
			this.$u.toast(e.msg)
			this.userInfo.avatar = e.id
			this.avatar_img = e.path
		},
		getUserInfo() {
			this.$u.api.material().then(res => {
				this.userInfo = res.data.data
				this.avatar_img = res.data.data.avatar
				this.area = res.data.data?.area_code_text?.name
			})
		},
		goChangePhone(url) {
			this.$u.route(`${url}`)
		},
		changeInfo() {
			this.$u.api.changeInfo(this.userInfo).then(res => {
				if (res.code === 1) {
					this.$u.toast(res.msg)

					setTimeout(() => {
						uni.navigateBack({ delta: 1 })
					}, 800)
				}
			})
		},
		confirm(e) {
			this.userInfo.area_code = e.slice(-1)[0].value
			console.log('this.area_code: ', this.area_code);
			this.area = `${e[0].label}/${e[1].label}/${e[2].label}`
		}
	}
}
</script>

<style lang="scss" scoped>
.upload {
	height: 100vh;
	background-color: #f8f8f8;
}

.top {
	padding-top: 60rpx;
	@include flex($aligin: center);
	flex-direction: column;
	font-size: 26rpx;
	color: #1c1c1c;

	.change {
		margin: 24rpx 0 52rpx;
	}
}

.info {
	border-radius: 20rpx;
	background-color: #fff;
	margin: 0 20rpx;
	color: #232323;

	.item {
		@include flex($aligin: center, $justify: space-between);
		border-bottom: 2rpx solid #f8f8f8;
		padding: 32rpx 0;
		margin: 0 20rpx;

		.left {
			color: #666666;
			@include flex;

			.text {
				margin-right: 10rpx;
			}
		}
	}
}

.btn {
	margin: 100rpx 30rpx;
}
</style>
